<template>
  <div
    id="runninglog"
    class="main-div main-div-nopadding"
  >
    <el-container>
      <el-aside
        class="background-color-white"
        style="padding: 20px 40px"
      >
        <!--开始时间-->
        <div class="card-header-div no-float margin-bottom">
          {{ $t('message.runningLog.aside.label1') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="startTime"
          type="datetime"
          :placeholder="$t('message.runningLog.aside.select1Placeholder')"
        />
        <!--结束时间-->
        <div class="card-header-div no-float margin-bottom">
          {{ $t('message.runningLog.aside.label2') }}
        </div>
        <el-date-picker
          class="margin-bottom-25"
          v-model="endTime"
          type="datetime"
          :placeholder="$t('message.runningLog.aside.select2Placeholder')"
        />
        <!--事件类型-->
        <div class="card-header-div no-float margin-bottom">
          {{ $t('message.runningLog.aside.label3') }}
        </div>
        <el-select
          class="margin-bottom-25"
          v-model="searchMessageType"
          clearable
          :placeholder="$t('message.runningLog.aside.select3Placeholder')"
        >
          <el-option
            v-for="(value, key) in $t('message.event.msg_type_name')"
            :key="key"
            :label="`${key}:${value}`"
            :value="key"
          />
        </el-select>
        <div>
          <el-button
            :loading="loading"
            @click="getRunningLog(true)"
            style="width: 100%"
            type="primary"
          >
            <!--查询-->
            {{ $t('message.runningLog.aside.buttonText') }}
          </el-button>
        </div>
      </el-aside>
      <el-main class="el-main-padding">
        <div class="my-breadcrumb-div">
          <i class="el-icon-location my-breadcrumb-icon my-breadcrumb-padding" />
          <el-breadcrumb
            class="my-breadcrumb-padding"
            separator="/"
          >
            <el-breadcrumb-item>
              <!--数据-->
              {{ $t('message.runningLog.breadcrumb.crumb1') }}
            </el-breadcrumb-item>
            <el-breadcrumb-item>
              <!--运行日志-->
              {{ $t('message.runningLog.breadcrumb.crumb2') }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <el-card style="height: calc(100% - 3.5em);text-align: left">
          <el-table
            :data="runningLogTableData"
            class="table-gutter-background"
            header-cell-class-name="my-table-header-cell"
            cell-class-name="my-table-cell"
            height="calc(100% - 2.5em)"
          >
            <el-table-column
              type="index"
              width="75px"
              :index="indexMethod"
            />
            <el-table-column
              :label="$t('message.runningLog.table.header.col2')"
              prop="dateTime"
              width="250px"
            />
            <el-table-column
              prop="msg_type"
              :label="$t('message.runningLog.table.header.col3')"
              width="120px"
            />
            <el-table-column
              prop="msg_type_name"
              :label="$t('message.runningLog.table.header.col4')"
              width="300"
            />
            <el-table-column
              :label="$t('message.runningLog.table.header.col5')"
            >
              <template slot-scope="scope">
                <div v-html="scope.row.event_content" />
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 10px;text-align: center">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[10, 20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="$store.state.cuLog.runningLogCount"
            />
          </div>
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import common from '@/common'
import service from '@/service/service'
export default {
  name: 'RunningLog',
  computed: {
    runningLogTableData () {
      let res = this.$store.getters.getRunningLogList
      return service.getEventContent(res)
    }
  },
  data () {
    return {
      loading: false,
      startTime: '',
      endTime: '',
      searchMessageType: '',

      // 用于已经查询了的分页
      searchedParams: {
        startTime: '',
        endTime: '',
        searchMessageType: ''
      },

      runningLogArr: [],

      currentPage: 1,
      pageSize: 10
    }
  },
  mounted () {
    let self = this
    self.$store.commit('setRunningLog', [])
    self.$store.commit('setRunningLogCount', 0)
  },
  methods: {
    indexMethod (index) {
      return index + (this.currentPage - 1) * this.pageSize + 1
    },
    async getRunningLog () {
      let self = this
      self.currentPage = 1
      try {
        self.loading = true
        await self.$store.dispatch('getRunningLogList', {
          begin: common.convertDateTime(self.startTime),
          end: common.convertDateTime(self.endTime),
          page: self.currentPage,
          page_size: self.pageSize,
          msg_type: self.searchMessageType
        })
        // 用于分页
        self.searchedParams.startTime = self.startTime
        self.searchedParams.endTime = self.endTime
        self.searchedParams.searchMessageType = self.searchMessageType
      } finally {
        self.loading = false
      }
    },
    async getRunningLogByPage () {
      let self = this
      try {
        self.loading = true
        await self.$store.dispatch('getRunningLogList', {
          begin: common.convertDateTime(self.searchedParams.startTime),
          end: common.convertDateTime(self.searchedParams.endTime),
          page: self.currentPage,
          page_size: self.pageSize,
          msg_type: self.searchedParams.searchMessageType
        })
      } finally {
        self.loading = false
      }
    },
    handleSizeChange (pageSize) {
      let self = this
      self.pageSize = pageSize
      self.getRunningLogByPage()
    },
    handleCurrentChange (currentPage) {
      let self = this
      self.currentPage = currentPage
      self.getRunningLogByPage()
    }
  }
}
</script>

<style scoped>
  .no-float{
    float: none;
  }
  .margin-bottom{
    margin-bottom: 20px;
  }
  .margin-bottom-25{
    margin-bottom: 20px;
  }
</style>
